<template>
    <div class="loadding">
        <svg class="icon" aria-hidden="true" @click="close">
            <use xlink:href="#icon-cuowuguanbiquxiao"></use>
        </svg>
        <div class="main">
            <h3 v-if="percent==100">导入完成</h3>
            <h3 v-else>项目导入中...</h3>
            <a-progress :percent="percent" :showInfo="false" strokeColor="#E1639C" type="line" :strokeWidth=20 />
            <span>{{'(当前导入第'+count+'个/共'+sum+'个)'}}</span>
            <button @click="close" v-if="percent==100">确定</button>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: 'attribute',
    data() {
        return {
            percent: 0,
            count: 0
        }
    },
    mounted() {

    },
    computed: {
        ...mapState({
            // 管理员数据
            newTableData: (state) => state.project.newTableData,
        }),
        sum: function () {
            var sumCount = this.newTableData.length;
            this.newTableData.forEach((element, index) => {
                if (sumCount != 0) {
                    this.percent = ((index + 1) / sumCount) * 100
                    this.count = index + 1
                }
            });
            return sumCount;
        },
    },
    methods: {
        // 关闭项目详情弹窗
        close() {
            this.$emit("closeLoadding");
        },
    },
}
</script>
<style lang="scss" scoped>
@import './loadding.scss';
</style>